<template>
  <child-page>
    <div class="components-form-demo-advanced-search">
      <a-form
        class="ant-advanced-search-form"
        :form="form"
        @submit="handleSubmit"
      >
        <a-form-item v-bind="formItemLayout" label="角色名称">
          <a-input
            v-decorator="[
              'title',
              { initialValue: initInfo.title, rules: rule.roleName }
            ]"
          />
        </a-form-item>
        <a-form-item v-bind="formItemLayout" label="角色描述">
          <a-input
            v-decorator="[
              'notation',
              { initialValue: initInfo.notation, rules: [] }
            ]"
          />
        </a-form-item>
        <a-form-item v-bind="formItemLayout" label="角色等级">
          <a-select
            v-decorator="[
              'role_level',

              {
                initialValue: initInfo.role_level,
                rules: [{ required: true, message: '必选项' }]
              }
            ]"
          >
            <a-select-option
              v-for="(item, index) in classList"
              :key="index"
              :value="item.id"
            >
              {{ item.title }}
            </a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item
          v-bind="formItemLayout"
          label="角色授权"
          help="若勾选了编辑权限，请把同类别有--详情--权限的也请勾选"
        >
          <input
            type="hidden"
            v-decorator="[
              'rules',
              {
                initialValue: initInfo.rules ? initInfo.rules.join(',') : '',
                rules: rule.rules
              }
            ]"
          />
          <checkbox-wrapper
            ref="checkboxList"
            v-for="(item, index) in athList"
            :key="index"
            :group="item"
            :defaultCheckedList="initInfo.rules"
          ></checkbox-wrapper>
        </a-form-item>
        <a-row>
          <a-col :span="24" :style="{ textAlign: 'center' }">
            <a-button type="primary" html-type="submit">
              提交
            </a-button>
            <a-button :style="{ marginLeft: '8px' }" @click="handleReset">
              重置
            </a-button>
          </a-col>
        </a-row>
      </a-form>
    </div>
  </child-page>
</template>

<script>
import validate from "@/tool/validateFunction";
import checkboxWrapper from "@/components/checkboxWrapper/index";
import childPage from "@/components/childPageContent/index";
export default {
  name: "add",
  components: {
    childPage,
    checkboxWrapper
  },
  data() {
    return {
      form: this.$form.createForm(this),
      formItemLayout: {
        labelCol: {
          xs: { span: 24 },
          sm: { span: 4 }
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 20 }
        }
      },
      athList: [],
      classList: [
        { id: "1", title: "超级管理员" },
        { id: "2", title: "管理员" },
        { id: "3", title: "普通操作用户" }
      ],
      statusOption: [{ label: "在用", value: 1 }, { label: "停用", value: 2 }],
      rule: {
        roleName: [
          { required: true, message: "必填项" },
          { validator: validate.validateLength, max: 15, min: 1 }
        ],
        roleColor: [{ required: true, message: "必填项" }],
        status: [{ required: true, message: "必填项" }],
        rules: [{ required: true, message: "必填项" }]
      },
      initInfo: {
        status: 1,
        roleDes: "",
        roleName: "",
        roleClass: "",
        rules: []
      }
    };
  },
  methods: {
    handleSubmit(e) {
      e.preventDefault();
      let arr = [];
      this.$refs.checkboxList.forEach(item => {
        arr.push(...item.getCheckedList());
      });
      arr = arr.join(",");
      this.form.setFieldsValue({ rules: arr });
      this.$nextTick(() => {
        this.form.validateFields((error, values) => {
          if (!error) {
            let data = JSON.parse(JSON.stringify(values));
            if (this.$route.name === "authorityRoleAdd") {
              data.type = 1;
              this.apiMethod(this.$api.addRoleInfo, data, "新增成功");
            } else {
              data.type = 2;
              data.id = this.$route.params.id;
              this.apiMethod(this.$api.editRoleInfo, data, "编辑成功");
            }
          }
        });
      });
    },
    apiMethod(api, data, words) {
      this.$ajax
        .post(api, data)
        .then(() => {
          this.$commonJs.getAthList();
          this.$notification.success({
            message: words
          });
          this.$router.push({ name: "authorityRole" });
        })
        .catch(err => {
          this.$notification.error({
            message: err
          });
        });
    },
    handleReset() {
      this.form.resetFields();
    },
    normFile(e) {
      if (Array.isArray(e)) {
        return e;
      }
      return e && e.fileList;
    },
    getJurisdictionList() {
      this.$ajax
        .post(this.$api.getAuthTreeList)
        .then(res => {
          this.athList = res;
        })
        .catch(err => {
          this.$notification.error({
            message: err
          });
        });
    },
    getAuthRoleInfo(data) {
      this.$ajax
        .get(this.$api.getAuthRoleInfo, { id: data })
        .then(res => {
          let selectAry = res.rules.split(",");
          this.initInfo = res;
          this.athList = res.tree_list;
          this.initInfo.rules = [];
          for (let item of selectAry) {
            this.initInfo.rules.push(item);
          }
        })
        .catch(err => {
          this.$notification.error({
            message: err
          });
        });
    }
  },
  created() {
    let id = this.$route.params.id;
    if (this.$route.name === "authorityRoleAdd") {
      this.getJurisdictionList();
    } else {
      this.getAuthRoleInfo(id);
    }
  }
};
</script>

<style scoped lang="less">
.components-form-demo-advanced-search {
  padding: 24px;
  background: #fbfbfb;
  border: 1px solid #d9d9d9;
  border-radius: 6px;
  .flex_content();
  .flex_justify_center();
}

.components-form-demo-advanced-search .ant-form {
  width: 1067px;
}
.components-form-demo-advanced-search .search-result-list {
  margin-top: 16px;
  border: 1px dashed #e9e9e9;
  border-radius: 6px;
  background-color: #fafafa;
  min-height: 200px;
  text-align: center;
  padding-top: 80px;
}
</style>
0
